<template>
	<view class="base-page">
		<view class="base-title">法人/联系人信息</view>
		<view class="mt-20">
			<view class="label-box">法人姓名：</view>
			<input type="text" placeholder="请输入法人姓名" class="inp-box" v-model="formData.legalName" :class="{'unactive':unActiveRule('legalName')}">
		</view>
		<view class="mt-20">
			<view class="label-box">法人证件类型：</view>
			<uni-data-select class="select-box" placeholder="请选择法人证件类型" v-model="formData.legalCertType"
				:localdata="dirctionList.certType" :clear="false" :class="{'unactive':unActiveRule('legalCertType')}"></uni-data-select>
		</view>
		<view>
			<view class="label-box">法人身份证人像面：</view>
			<view style="margin: 10px auto; width: 140px;">
				<uni-file-picker limit="1" :image-styles="cerImageStyles" @delete="delImg($event,'legalCertFileList')" v-model='legalCertFileList' @select="selectImg($event,'legalCertFileList')">
					<view class="upload-box flex flex-col item-center justify-center" :class="{'unactive':unActiveRule('legalCertFrontPicUrl')}">
						<uni-icons type="plusempty" size="27" color="rgba(51, 51, 51, 0.6)"></uni-icons>
						上传图片
					</view>
				</uni-file-picker>
			</view>

		</view>
		<view>
			<view class="label-box">法人身份证国徽面：</view>
			<view style="margin: 10px auto; width: 140px;">
				<uni-file-picker limit="1" :image-styles="cerImageStyles" v-model='legalCertBackFileList' @select="selectImg($event,'legalCertBack')"  @delete="delImg($event,'legalCertBack')">
					<view class="upload-box flex flex-col item-center justify-center" :class="{'unactive':unActiveRule('legalCertBackPicUrl')}">
						<uni-icons type="plusempty" size="27" color="rgba(51, 51, 51, 0.6)"></uni-icons>
						上传图片
					</view>
				</uni-file-picker>
			</view>
		</view>
		<view class="mt-20">
			<view class="label-box">法人证件号：</view>
			<input type="text" placeholder="请输入法人证件号" class="inp-box" v-model="formData.legalCertNo" :class="{'unactive':unActiveRule('legalCertNo')}">
		</view>
		<view class="flex item-center m-t-b-10">
			<view class="label-box">法人证件有效期：</view>
			<uni-data-checkbox selectedColor="rgba(0, 174, 255, 1)" selectedTextColor="rgba(0, 174, 255, 1)"
				v-model="formData.legalCertValidityType" :localdata="dirctionList.certValidityType" />
		</view>
		<view class="flex item-center m-t-b-10">
			<view class="label-box">法人证件有效期开始日期：</view>
			<uni-datetime-picker placeholder="请选择法人证件有效期开始日期" v-model="formData.legalCertBeginDate" type="date">
				<view class="inp-box flex justify-between item-center" :class="{'unactive':unActiveRule('legalCertBeginDate')}">
					<text>{{formData.legalCertBeginDate}}</text>
					<image src="@/applyPages/static/icon-date.svg" mode="widthFix" class="icon-date"></image>
				</view>
			</uni-datetime-picker>
		</view>
		<view class="flex item-center m-t-b-10" v-if="formData.legalCertValidityType == 0">
			<view class="label-box">法人证件有效期截止日期：</view>
			<uni-datetime-picker placeholder="请选择法人证件有效期截止日期" v-model="formData.legalCertEndDate" type="date" :start="formData.legalCertBeginDate">
				<view class="inp-box flex justify-between item-center" :class="{'unactive':formData.legalCertValidityType == 0 && unActiveRule('legalCertEndDate')}">
					<text>{{formData.legalCertEndDate}}</text>
					<image src="@/applyPages/static/icon-date.svg" mode="widthFix" class="icon-date"></image>
				</view>
			</uni-datetime-picker>
		</view>
		<view class="flex item-center m-t-b">
			<view class="label-box">法人身份证地址：</view>
			<input type="text" placeholder="请输入法人身份证地址" class="inp-box" :class="{'unactive':unActiveRule('legalAddr')}" v-model="formData.legalAddr">
		</view>
		<view class="flex item-center m-t-b">
			<view class="label-box">法人手机号：</view>
			<input type="number" placeholder="请输入法人手机号" class="inp-box" v-model="formData.legalMobileNo" :class="{'unactive':unActiveRule('legalMobileNo')}">
		</view>
		<view class="flex item-center">
			<view class="label-box">签约人：</view>
			<uni-data-checkbox selectedColor="rgba(0, 174, 255, 1)" selectedTextColor="rgba(0, 174, 255, 1)"
				v-model="formData.signUserType" :localdata="dirctionList.signUser" />
		</view>
		<view class="tip-title">入驻后签约人手机将会收到一条签约短信，需进入短信链接完成签约</view>
		<view v-if="formData.signUserType == 2">
			<view class="flex item-center m-t-b" v-if="baseData">
				<view class="label-box">联系人姓名：</view>
				<input type="text" placeholder="请输入联系人姓名" :disabled="true" class="inp-box" v-model="baseData.contactName">
			</view>
			<view class="flex item-center m-t-b" v-if="baseData">
				<view class="label-box">联系人手机号：</view>
				<input type="number" placeholder="请输入联系人手机号" :disabled="true" class="inp-box" v-model="baseData.contactMobileNo">
			</view>

			<view class="flex item-center m-t-b">
				<view class="label-box">联系人身份证号：</view>
				<input type="text" placeholder="请输入联系人身份证号" class="inp-box" :class="{'unactive':unActiveRule('contactCertNo')}" v-model="formData.contactCertNo">
			</view>
		</view>

		<view class="base-title">结算信息</view>
		<view class="mt-20">
			<view class="label-box">账户类型：</view>
			<uni-data-select class="select-box" placeholder="请选择账户类型" v-model="formData.cardType"
				:localdata="dirctionList.cardType" :clear="false" :class="{'unactive':unActiveRule('cardType')}"></uni-data-select>
		</view>
		<view v-if="formData.cardType == 0"  class="mt-20">
			<view class="label-box">开户许可证：</view>
			<view style="margin: 10px auto; width: 140px;">
				<uni-file-picker limit="1" :image-styles="cerImageStyles" @delete="delImg($event,'regAcct')" v-model='regAcctFileList' @select="selectImg($event,'regAcct')">
					<view class="upload-box flex flex-col item-center justify-center" :class="{'unactive':unActiveRule('regAcctPicUrl')}">
						<uni-icons type="plusempty" size="27" color="rgba(51, 51, 51, 0.6)"></uni-icons>
						上传图片
					</view>
				</uni-file-picker>
			</view>

		</view>
		<view v-if="formData.cardType == 0" class="mt-20">
			<view class="label-box">开户许可证核准号：</view>
			<input type="text" placeholder="请输入开户许可证核准号" class="inp-box" :class="{'unactive':unActiveRule('openLicenceNo')}" v-model="formData.openLicenceNo">
		</view>
		
		<view class="mt-20">
			<view class="label-box">账户名称：</view>
			<input type="text" placeholder="请输入账户名称" class="inp-box" :class="{'unactive':unActiveRule('cardName')}" v-model="formData.cardName">
		</view>
		<view class="mt-20">
			<view class="label-box">银行账号：</view>
			<input type="text" placeholder="请输入银行账号" class="inp-box" :class="{'unactive':unActiveRule('cardNo')}" v-model="formData.cardNo">
		</view>
		<view class="mt-20">
			<view class="label-box">所属银行：</view>
			<uni-data-select class="select-box" placeholder="请选择所属银行" :class="{'unactive':unActiveRule('bankCode')}" v-model="formData.bankCode"
				:localdata="dirctionList.listBank" :clear="false"></uni-data-select>
		</view>
		<view class="mt-20">
			<view class="label-box">银行卡所在地：</view>
			<picker class="inp-box" :class="{'unactive':unActiveRule('bankProvinceName')}" mode="multiSelector" range-key="localName" :value='regCity' @columnchange="onnodeclick($event,'bankAdree')" :range="[dirctionList.hfProviceList,cityList,countryList]" @change="changeProvice($event,'bankAdree')">
				<view :style="{color:formData.bankProvinceName?'':'#A5A7A9'}"  class="flex item-center justify-between">
					<text> {{formData.bankProvinceName ?
					formData.bankProvinceName + (formData.bankCityName?'/'+formData.bankCityName:'')+(formData.bankCountyName?'/'+formData.bankCountyName:'')
					: '请选择银行卡所在地'}}</text>
			       <uni-icons type="down" size="20" color="#A5A7A9"></uni-icons>
			    </view>
			</picker>
		</view>

		<view v-if="formData.cardType == 0"  class="mt-20">
			<view class="label-box">联行号：</view>
			<input type="number" placeholder="请输入联行号" class="inp-box" :class="{'unactive':unActiveRule('branchCode')}" v-model="formData.branchCode">
			<view class="c3-6 fs-12 mt-4">
				指收款账户所在银行支行的编号,可复制查询链接进入浏览器查询。<text class="color-secondary-info" @click.stop="copySearchLink()">复制查询链接</text>
			</view>
		</view>
		<view class=""  v-if="formData.cardType != 0">
			<view class="mt-20">
				<view class="label-box">持卡人证件类型：</view>
				<uni-data-select class="select-box" placeholder="请选择持卡人证件类型" v-model="formData.certType"
					:localdata="dirctionList.certType" :clear="false" :class="{'unactive':unActiveRule('certType')}"></uni-data-select>
				<!-- <view class="tip-title">入驻后签约人手机将会收到一条签约短信，需进入短信链接完成签约</view> -->
			</view>
			<view  class="mt-20">
				<view class="label-box">持卡人证件号码：</view>
				<input type="text" placeholder="请输入持卡人证件号码" class="inp-box" :class="{'unactive':unActiveRule('certNo')}" v-model="formData.certNo">
			</view>
			<view class="flex item-center m-t-b">
				<view class="label-box" style="width: 140px;">持卡人证件有效期：</view>
				<uni-data-checkbox class="cerVail" selectedColor="rgba(0, 174, 255, 1)" selectedTextColor="rgba(0, 174, 255, 1)"
					v-model="formData.certValidityType" :localdata="dirctionList.certValidityType" />
			</view>

			<view class="flex item-center m-t-b-10">
				<view class="label-box">持卡人证件有效期开始日期：</view>
				<uni-datetime-picker placeholder="请选择持卡人证件有效期开始日期" v-model="formData.certBeginDate" type="date">
					<view class="inp-box flex justify-between item-center"  :class="{'unactive':unActiveRule('certBeginDate')}">
						<text>{{formData.certBeginDate}}</text>
						<image src="@/applyPages/static/icon-date.svg" mode="widthFix" class="icon-date"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="flex item-center m-t-b-10" v-if="formData.certValidityType == 0">
				<view class="label-box">持卡人证件有效期截止日期：</view>
				<uni-datetime-picker placeholder="请选择持卡人证件有效期截止日期" v-model="formData.certEndDate" type="date" :start="formData.certBeginDate">
					<view class="inp-box flex justify-between item-center" :class="{'unactive':formData.certValidityType == 0 && unActiveRule('certEndDate')}">
						<text>{{formData.certEndDate}}</text>
						<image src="@/applyPages/static/icon-date.svg" mode="widthFix" class="icon-date"></image>
					</view>
				</uni-datetime-picker>
			</view>
			<view class="mt-20">
				<view class="label-box">银行卡正面：</view>
				<view style="margin: 10px auto; width: 140px;">
					<uni-file-picker limit="1" :image-styles="cerImageStyles" v-model='settleCardFileList' @select="selectImg($event,'settleCard')"  @delete="delImg($event,'settleCard')">
						<view class="upload-box flex flex-col item-center justify-center" :class="{'unactive':unActiveRule('settleCardFrontPicUrl')}">
							<uni-icons type="plusempty" size="27" color="rgba(51, 51, 51, 0.6)"></uni-icons>
							上传图片
						</view>
					</uni-file-picker>
				</view>
			</view>
			<view class="mt-20">
				<view class="label-box">持卡人身份证人像面：</view>
				<view style="margin: 10px auto; width: 140px;">
					<uni-file-picker limit="1" :image-styles="cerImageStyles" v-model='settleCertFrontFileList' @select="selectImg($event,'settleCertFront')"  @delete="delImg($event,'settleCertFront')">
						<view class="upload-box flex flex-col item-center justify-center" :class="{'unactive':unActiveRule('settleCertFrontPicUrl')}">
							<uni-icons type="plusempty" size="27" color="rgba(51, 51, 51, 0.6)"></uni-icons>
							上传图片
						</view>
					</uni-file-picker>
				</view>
			</view>
			<view class="mt-20">
				<view class="label-box">持卡人身份证国徽面：</view>
				<view style="margin: 10px auto; width: 140px;">
					<uni-file-picker limit="1" :image-styles="cerImageStyles" v-model='settleCertBackFileList' @select="selectImg($event,'settleCertBack')"  @delete="delImg($event,'settleCertBack')">
						<view class="upload-box flex flex-col item-center justify-center" :class="{'unactive':unActiveRule('settleCertBackPicUrl')}">
							<uni-icons type="plusempty" size="27" color="rgba(51, 51, 51, 0.6)"></uni-icons>
							上传图片
						</view>
					</uni-file-picker>
				</view>
			</view>
			<view class="flex item-center m-t-b">
				<view class="label-box">银行卡绑定手机号：</view>
				<input type="number" placeholder="请输入银行卡绑定手机号" class="inp-box" v-model="formData.mp" :class="{'unactive':unActiveRule('mp')}">
			</view>
		</view>


		<!-- <popupRegion ref="popup"></popupRegion> -->
		<view class="k-page"></view>
		<view class="btn-box flex item-center justify-between">
			<view class="callback-btn" @click="preStep">上一步</view>
			<view class="release-btn" @click="nextStep">下一步</view>
		</view>
	</view>
</template>

<script setup>
	import uniFilePicker from '@/applyPages/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue';
	import uniDataCheckbox from '@/applyPages/uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue';
	import uniIcons from '@/applyPages/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import uniDataSelect  from '@/applyPages/uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue';
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		uploadFileApi,
		hfUploadFileApi,
		hfUploadFileProgressApi,
		getHfRegionsByIdApi,
		getHfMccById,
		getHfMccApi,
		listCompanyType,
		listCertValidityType,
		listCertType,
		listCardType,
		listBank
	} from '@/api/common.js'
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import {
		checkPhoneNumber,
		ocrImage,
		formatDatetime
	} from '@/utils/index.js'
	import {getFileNameExtName, getFileNameAndExtension} from '@/applyPages/api/common.js'
	import { useWebView } from '@/hooks/useWebView.js'
	import { BranchCodeURL } from '@/config/index.js'
	
	const userStore = useUserStore()
	let user = ref(userStore.$state.userInfo.mobile)
	let popup = ref()
	const props = defineProps({
		detail: {
			type: Object //字典
		},
		baseData: {
			type: Object //字典
		},
	})
	const imageStyles = ref({
		width: 80,
		height: 80,
		border: {
			color: "rgba(51, 51, 51, 0.6)",
			width: '0px',
			style: 'dashed',
			radius: '2px'
		}
	})
	const cerImageStyles = ref({
		width: 140,
		height: 88,
		border: {
			color: "rgba(51, 51, 51, 0.6)",
			width: '0px',
			style: 'dashed',
			radius: '2px'
		}
	})
	const mcc = ref({
		level1: null,
		level2: null
	})
	const show = ref(false)
	const emit = defineEmits(['nextStep','preStep'])
	const formData = ref({
		legalName: '', //法人姓名
		legalCertType: '', //法人证件类型
		legalCertNo: '', //法人证件号(1：政府机构，2：国营企业，3：私营企业，4：外资企业，5：个体工商户，6：其它组织，7：事业单位)
		legalCertValidityType: '', //法人证件有效期
		legalCertBeginDate: '', //法人证件有效期开始日期
		legalCertEndDate: '', //法人证件有效期截止日期
		legalAddr: '', //法人身份证地址，格式：yyyy-MM-dd
		legalCertFrontPic: '', //法人身份证人像面
		legalCertFrontPicUrl:'',//法人身份证人像面图片地址
		legalCertBackPic: '', //法人身份证国徽面
		legalCertBackPicUrl:'',//法人身份证国徽面图片地址
		legalMobileNo: '', //法人手机号
		signUserType:  2, //签约人
		contactCertNo: '', //联系人身份证号
		// 结算信息
		cardType: 0, //账户类型
		regAcctPicUrl:'',//开户许可证
		regAcctPic:'',
		openLicenceNo:'',//开户许可核销号
		cardName: '', //账户名称
		cardNo: '', //银行账号
		bankCode:'',//所属银行编号
		bankProvinceCode: '', //银行卡所在地
		bankProvinceName: '' ,
		bankCityCode: '' ,
		bankCityName : '',
		bankCountyCode: '' ,
		bankCountyName: '' ,
		branchCode: '', //联行号
		certType: '', //持卡人证件类型
		certNo: '', //持卡人证件号码
		certValidityType: '', //持卡人证件有效期
		certBeginDate: '', //持卡人证件有效期开始日期
		certEndDate: '', //持卡人证件有效期截止日期
		settleCardFrontPic: '', //银行卡正面
		settleCardFrontPicUrl: '', //银行卡正面图片地址
		settleCertFrontPic: '', //持卡人身份证人像面
		settleCertFrontPicUrl: '', //持卡人身份证人像面图片地址
		settleCertBackPic: '', //持卡人身份证国徽面
		settleCertBackPicUrl: '', //持卡人身份证国徽面图片地址
		mp: '', //银行卡绑定手机号
		
		
	})
	let dirctionList = ref({
		certValidityType: [],
		certType: [],
		cardType: [],
		mccType: [],
		hfMccList: [],
		level2: [],
		level3: [],
		hfProviceList:[],
		signUser:[{text:'联系人',value:2}],
		listBank:[]
	})
	let cityList=ref([])
	let countryList=ref([])
	let logoFileList = ref([])
	const getCommonData = () => {
		// listCertType(), listCardType(),
		Promise.all([listCertType(), listCertValidityType(),getHfRegionsByIdApi(0),listCardType(),listBank()])
			.then( async (result) => {
				if (result.length) {
					dirctionList.value = {
						certType: result[0].map(item => {
							return {
								text: item.name,
								value: item.code
							}
						}),
						certValidityType: result[1].map(item => {
							return {
								text: item.name,
								value: item.code
							}
						}),
						hfProviceList: result[2].map(item => {
							item.children = []
							return item
						}),
						cardType: result[3].map(item => {
							return {
								text: item.name,
								value: item.code
							}
						}),
						listBank: result[4].map(item => {
							return {
								text: item.name,
								value: item.code
							}
						}),
						// signUser:[{text:'联系人',value:2}],
						signUser:[{text:'法人',value:1},{text:'联系人',value:2}],
					}
					// selPro.value = result[4][0]
					getHfRegionsByIdApi(result[2][0].id).then(res => {
						dirctionList.value.hfProviceList[0].children =  res||[]
						cityList.value = res||[]
						getHfRegionsByIdApi(res[0].id).then(data => {
							countryList.value = data||[]
						})
					})
					// if(result){
					// 	dirctionList.value.hfProviceList[0].children =  result
					// }
				}
				// console.log(result, 'a')
			})
	}
	const getMccListById = async (id, type) => {
		let result = await getHfMccById(id)
		if (result) {
			dirctionList.value[type] = result.map(item => {
				return {
					text: item.mccName,
					value: item.id
				}
			})
		}
	}
	const regCity = ref([0,0,0])
	const selPro = ref({})
	const onnodeclick = async (e,type) =>{
		if(e.detail.column == 0){
			let obj = dirctionList.value.hfProviceList[e.detail.value]
			selPro.value = obj
			if(obj.children && obj.children.length){
				cityList.value = obj.children
				if(obj.children[0].children && obj.children[0].children.length){
					countryList.value = obj.children[0].children
				}else{
					let list = await getHfRegionsByIdApi(obj.children[0].id)
					countryList.value = list
				}
			}else{
				let result = await getHfRegionsByIdApi(obj.id)
				if(result){
					dirctionList.value.hfProviceList.forEach(item => {
						if(item.id == obj.id){
							item.children = result
						}
					})
					cityList.value = obj.children
					let list = await getHfRegionsByIdApi(obj.children[0].id)
					countryList.value = list
				}
			}
		}else if(e.detail.column == 1){
			let obj = cityList.value[e.detail.value]
			if(obj.children && obj.children.length){
				countryList.value = obj.children
			}else{
				let result = await getHfRegionsByIdApi(obj.id)
				if(result){
					cityList.value.forEach(item => {
						if(item.id == obj.id){
							item.children = result
						}
					})
					dirctionList.value.hfProviceList.forEach(item => {
						if(item.id == selPro.value){
							item.children = cityList.value
						}
					})
					countryList.value = obj.children
				}
			}
		}else if(e.detail.column == 2){
			// regCity.value[2] = e.detail.value
			let obj = countryList.value[e.detail.value]
		}

	}
	const changeProvice = (e,type) => {
		regCity.value = e.detail.value
		if(type == 'bankAdree'){
			formData.value.bankProvinceCode = dirctionList.value.hfProviceList[regCity.value[0]].code
			formData.value.bankProvinceName = dirctionList.value.hfProviceList[regCity.value[0]].localName
			formData.value.bankCityCode = cityList.value[regCity.value[1]].code
			formData.value.bankCityName = cityList.value[regCity.value[1]].localName
			formData.value.bankCountyCode = countryList.value[regCity.value[2]].code
			formData.value.bankCountyName = countryList.value[regCity.value[2]].localName
		}
	}
	let legalCertFileList = ref([])
	let legalCertBackFileList = ref([])
	let regAcctFileList = ref([])
	let settleCardFileList = ref([])
	let settleCertBackFileList = ref([])
	let settleCertFrontFileList = ref([])
	// 删除图片
	const delImg = (e,type) =>{
		if( type == 'legalCertFileList'){ //法人身份证人像面
			formData.value.legalCertFrontPicUrl = ''
			formData.value.legalCertFrontPic = ''
			legalCertFileList.value = []
		}else if(type=='legalCertBack'){//法人身份证人国徽
			formData.value.legalCertBackPicUrl =''
			formData.value.legalCertBackPic = ''
			legalCertBackFileList.value = []
		}else if(type=='regAcct'){
			formData.value.regAcctPicUrl = ''
			formData.value.regAcctPic = ''
			regAcctFileList.value = []
		}else if(type=='settleCard'){//结算银行卡
			formData.value.settleCardFrontPicUrl = ''
			formData.value.settleCardFrontPic = ''
			settleCardFileList.value = []
		}else if(type=='settleCertBack'){//结算人身份证国徽面
			formData.value.settleCertBackPicUrl = ''
			formData.value.settleCertBackPic =''
			settleCertBackFileList.value = []
		}else if(type=='settleCertFront'){
			formData.value.settleCertFrontPicUrl = ''
			formData.value.settleCertFrontPic = ''
			settleCertFrontFileList.value = []
		}
	
	}
	// 图片上传
	const load = {
		legalCertFileList:false,
		legalCertBack:false,
		regAcct:false,
		settleCard:false,
		settleCertBack:false,
		settleCertFront:false
	}
	const selectImg = async (e, type) => {
		let tempFiles = e.tempFiles[0]
		let files = e.tempFilePaths
		let result = null
		// uni.showLoading()
			let typeStr = type == 'legalCertFileList'?'F02'//法人身份证人像面
			:type=='legalCertBack'?'F03'//法人身份证人国徽
			:type=='regAcct'?'F08'//开户许可证
			:type=='settleCard'?'F13'//结算银行卡
			:type=='settleCertBack'?'F56'//结算人身份证国徽面
			:type=='settleCertFront'?'F55':''
			load[type] = true
			hfUploadFileProgressApi(typeStr, {
				filePath: files[0],
				name: 'file',
				complete: (uploadFileRes) => {
					load[type] = false
					result = uploadFileRes.data && JSON.parse(uploadFileRes.data)
					if (uploadFileRes.statusCode === 200) {
						if(result.data && result.code == 200){
							let item = {
								url: result.data.imgUrl,
								name: tempFiles.name,
								extname: tempFiles.extname
							}
							if( type == 'legalCertFileList'){ //法人身份证人像面
								formData.value.legalCertFrontPicUrl = result.data.imgUrl
								formData.value.legalCertFrontPic = result.data.fileId
								legalCertFileList.value = [item]

								ocrImage(result.data.imgUrl,1).then(invokeRes=>{
									const {data:{idcard_res}} = invokeRes;
									formData.value.legalName = idcard_res.name.text;
									formData.value.legalCertNo = idcard_res.id.text;
									formData.value.legalAddr = idcard_res.address.text;
								}).catch(err=>console.log({err}))
							}else if(type=='legalCertBack'){//法人身份证人国徽
								formData.value.legalCertBackPicUrl = result.data.imgUrl
								formData.value.legalCertBackPic = result.data.fileId
								legalCertBackFileList.value = [item]

								ocrImage(result.data.imgUrl,1).then(invokeRes=>{
									const {data:{idcard_res}} = invokeRes;
									const validDateArr = idcard_res.valid_date.text.split('-');
									formData.value.legalCertBeginDate = formatDatetime(validDateArr[0],'YYYY-MM-DD');
									formData.value.legalCertEndDate = formatDatetime(validDateArr[1],'YYYY-MM-DD');
								}).catch(err=>console.log({err}))
							}else if(type=='regAcct'){//开户许可证
								formData.value.regAcctPicUrl = result.data.imgUrl
								formData.value.regAcctPic = result.data.fileId
								regAcctFileList.value = [item]
							}else if(type=='settleCard'){//结算银行卡
								formData.value.settleCardFrontPicUrl = result.data.imgUrl
								formData.value.settleCardFrontPic = result.data.fileId
								settleCardFileList.value = [item]
							}else if(type=='settleCertBack'){//结算人身份证国徽面
								formData.value.settleCertBackPicUrl = result.data.imgUrl
								formData.value.settleCertBackPic = result.data.fileId
								settleCertBackFileList.value = [item]
							}else if(type=='settleCertFront'){
								formData.value.settleCertFrontPicUrl = result.data.imgUrl
								formData.value.settleCertFrontPic = result.data.fileId
								settleCertFrontFileList.value = [item]
							}
						}else{
							delImg(e, type)
							uni.showToast({
								icon: 'none',
								title: result.message
							})
						}
							
					} else {
						delImg(e, type)
						uni.showToast({
							icon: 'none',
							title: '上传失败'
						})
					}
				}
			},(pro) => {
				if(!pro.progress) return
				tempFiles.progress = pro.progress
				if( type == 'legalCertFileList'){ //法人身份证人像面
					legalCertFileList.value = [tempFiles]
				}else if(type=='legalCertBack'){//法人身份证人国徽
					legalCertBackFileList.value = [tempFiles]
				}else if(type=='regAcct'){//开户许可证
					regAcctFileList.value = [tempFiles]
				}else if(type=='settleCard'){//结算银行卡
					settleCardFileList.value = [tempFiles]
				}else if(type=='settleCertBack'){//结算人身份证国徽面
					settleCertBackFileList.value = [tempFiles]
				}else if(type=='settleCertFront'){
					settleCertFrontFileList.value = [tempFiles]
				}
				
			})
			// uni.hideLoading()
	}
	
	const preStep = () => {
		emit('preStep')
	}
	const formRule = ref(false)
	const unActiveRule = (name) => {
		if(formRule.value){
			if(!formData.value[name] && String(formData.value[name]) != '0'){
				return true
			}
		}
		return false
	}
	const nextStep = () => {
		const formDataTip = {
			legalName: '请输入法人姓名', //法人姓名
			legalCertType: '请选择法人证件类型', //法人证件类型
			legalCertNo: '请输入法人证件号', //法人证件号(1：政府机构，2：国营企业，3：私营企业，4：外资企业，5：个体工商户，6：其它组织，7：事业单位)
			legalCertValidityType: '请选择法人证件有效期', //法人证件有效期
			legalCertBeginDate: '请输入法人证件有效期开始日期', //法人证件有效期开始日期
			legalCertEndDate: '请输入法人证件有效期截止日期', //法人证件有效期截止日期
			legalAddr: '请输入法人身份证地址', //法人身份证地址，格式：yyyy-MM-dd
			legalCertFrontPic: '请上传法人身份证人像面', //法人身份证人像面
			legalCertBackPic: '请上传法人身份证国徽面', //法人身份证国徽面
			legalMobileNo: '请输入法人手机号', //法人手机号
			signUserType: '请选择签约人', //签约人
			contactCertNo: '请输入联系人身份证号', //联系人身份证号
			// 结算信息
			// cardType: '请选择账户类型', //账户类型
			// cardName: '请输入账户名称', //账户名称
			// cardNo: '请输入银行账号', //银行账号
			// regProvinceCode: '请选择银行卡所在地', //银行卡所在地
		}
		let cardInfo0 = {
			cardType: '请选择账户类型', //账户类型
			regAcctPic: '请上传开户许可证', //开户许可证
			openLicenceNo: '请输入开户许可证核准号', //开户许可证核准号
			bankCode:"请选择所属银行",
			cardName: '请输入账户名称', //账户名称
			cardNo: '请输入银行账号', //银行账号
			bankProvinceCode: '请选择银行卡所在地', //银行卡所在地
			branchCode: '请输入联行号', //联行号
		}
		let cardInfo1 = {
			cardType: '请选择账户类型', //账户类型
			cardName: '请输入账户名称', //账户名称
			cardNo: '请输入银行账号', //银行账号
			bankCode:"请选择所属银行",
			bankProvinceCode: '请选择银行卡所在地', //银行卡所在地
			certType: '请选择持卡人证件类型', //持卡人证件类型
			certNo: '请输入持卡人证件号码', //持卡人证件号码
			certValidityType: '请选择持卡人证件有效期', //持卡人证件有效期
			certBeginDate: '请选择持卡人证件有效期开始日期', //持卡人证件有效期开始日期
			certEndDate: '请选择持卡人证件有效期截止日期', //持卡人证件有效期截止日期
			settleCardFrontPicUrl: '请上传银行卡正面图片', //银行卡正面图片地址
			settleCertFrontPicUrl: '请上传持卡人身份证人像面图片', //持卡人身份证人像面图片地址
			settleCertBackPicUrl: '请上传卡人身份证国徽面图片', //持卡人身份证国徽面图片地址
			mp: '请输入银行卡绑定手机号', //银行卡绑定手机号
		}
		if(formData.value['cardType'] == 0){
			Object.assign(formDataTip,formDataTip,cardInfo0)
		}else{
			Object.assign(formDataTip,formDataTip,cardInfo1)
		}
		let flag = null,title=null
		Object.keys(formData.value).forEach(key => {
			if(!flag){
				if(!formData.value[key] && String(formData.value[key]) != '0' && formDataTip[key] ){
					if ((key == 'legalCertEndDate' && formData.value['legalCertValidityType'] == 1)) {

					} else if((key == 'certEndDate' && formData.value['certValidityType'] == 1)){

					}else{flag = key}
				}
				if(!flag){
					if((key == 'legalMobileNo'|| key == 'mp') && formDataTip[key] && !checkPhoneNumber(formData.value[key])){
						title = (key == 'legalMobileNo'?'请输入正确的法人手机号':'请输入正确的银行卡绑定手机号')
						flag = key
					}
				}

			}

		})
		if(flag){
			formRule.value = true
			let showTitle = title||formDataTip[flag]
			switch (flag){
				case 'legalCertFrontPic':
					if(load.legalCertFileList){
						showTitle='图片上传中...'
					}
				break;
				case 'legalCertBackPic':
					if(load.legalCertBack){
						showTitle='图片上传中...'
					}
				break;
				
				case 'regAcctPic':
					if(load.regAcct){
						showTitle='图片上传中...'
					}
				break;
				case 'settleCardFrontPicUrl':
					if(load.settleCard){
						showTitle='图片上传中...'
					}
				break;
				case 'settleCertBackPicUrl':
					if(load.settleCertBack){
						showTitle='图片上传中...'
					}
				break;
				case 'settleCertFrontPicUrl':
					if(load.settleCertFront){
						showTitle='图片上传中...'
					}
				break;
			}
			uni.showToast({
				icon:'none',
				title: showTitle
			})
			return
		}else{
			formRule.value = false
		}
		emit('nextStep',{data:formData.value,step:3})
	}
	const getImgItemObj = (url) => {
		let item = {
			url: url,
			name: getFileNameAndExtension(url),
			extname: getFileNameExtName(url)
		}
		return item
	}
	const setImg = () => {

		if( props.detail.legalCertFrontPicUrl){ //法人身份证人像面
			legalCertFileList.value = [getImgItemObj(props.detail.legalCertFrontPicUrl)]
		}
		 if(props.detail.legalCertBackPicUrl){//法人身份证人国徽
			legalCertBackFileList.value = [getImgItemObj(props.detail.legalCertBackPicUrl)]
		}
		 if(props.detail.regAcctPicUrl && props.detail.cardType == 0){//开户许可证
			regAcctFileList.value = [getImgItemObj(props.detail.regAcctPicUrl)]
		}
		 if(props.detail.settleCardFrontPicUrl && props.detail.cardType != 0){//结算银行卡
			settleCardFileList.value = [getImgItemObj(props.detail.settleCardFrontPicUrl)]
		}
		 if(props.detail.settleCertBackPicUrl && props.detail.cardType != 0){//结算人身份证国徽面
			settleCertBackFileList.value = [getImgItemObj(props.detail.settleCertBackPicUrl)]
		}
		 if(props.detail.settleCertFrontPicUrl && props.detail.cardType != 0){
			settleCertFrontFileList.value = [getImgItemObj(props.detail.settleCertFrontPicUrl)]
		}
	}

	const copySearchLink = () => {
		uni.setClipboardData({
			data: BranchCodeURL,
			success:()=>{
				// 先隐藏默认的
				uni.hideToast();
                // 再显示自己的
				uni.showToast({title:'链接复制成功',icon:'none'});
			},
		})
	}

	watch(() => props.detail,(val) => {
		Object.keys(formData.value).forEach(key => {
			formData.value[key] = val[key]
		})
		setImg()
	})
	onMounted(() => {
		getCommonData()
	})
</script>
<style>
	.select-box .uni-stat__select {
		background: rgba(245, 245, 245, 1);
	}
</style>
<style lang="scss" scoped>
	.base-page {
		padding: 20px;
		background-color: #ffffff;
	}

	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
	}

	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}

	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 44px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 44px;
		border:1px solid rgba(245, 245, 245, 1);
		&.unactive{
			border-color:#FA4543;
		}
	}

	.tip-title {
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		color: rgba(51, 51, 51, 0.6);
		margin-top: 4px;
	}

	.select-box {
		background: rgba(245, 245, 245, 1);
	}

	.upload-box {
		width: 100%;
		height: 100%;
		border: 1px dashed rgba(51, 51, 51, 0.6);
		background-color: rgba(245, 245, 245, 1);
		border-radius: 12px;
		font-size: 12px;
		color: rgba(51, 51, 51, 0.6);
		&.unactive{
			border-color:#FA4543;
		}
	}
	// .upload-box-cer{

	// }
	.icon-date {
		width: 16px;
	}

	.m-t-b {
		margin: 10px 0;

		.label-box {
			width: 70px;
		}

		.inp-box {
			margin-left: 10px;
			width: calc(100% - 80px);
		}
	}

	.m-t-b-10 {
		margin: 10px 0;
	}
	.release-btn {
		// width: 343px;
		width: 40%;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		// gap: 10px;
		background: #FA4543;
		color: #ffffff;
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;

		&.unactive {
			background: rgba(169, 171, 172, 1);
		}
	}
	.callback-btn{
		width: 40%;
		height: 46px;
		padding: 12px, 20px, 12px, 20px;
		border-radius: 8px;
		background: #ffffff;
		color: rgba(51, 51, 51, 0.6);
		border: 1px solid rgba(51, 51, 51, 0.6);
		margin: 10px 20px;
		text-align: center;
		line-height: 46px;
	}
	.k-page{
		height: 120px;
	}
	.btn-box{
		position: fixed;
		bottom: 0px;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 7;
		padding: 10px 0;
	}
</style>
